<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入姓名" clearable v-model="username" @clear="searchUser">
                        <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>

                    </el-input>
                </el-col>
                <el-col :span="4">
                  <el-button type="success" @click="htmlToExcel('#userTable','用户表')">导出Excel</el-button>
                    <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
                </el-col>
            </el-row>
            <el-table :data="userList" border stripe id="userTable">
                <el-table-column type="index"></el-table-column>
                <el-table-column label="用户名" prop="username"></el-table-column>
                <el-table-column label="密码" prop="password"></el-table-column>
                <el-table-column label="头像">
                  <template slot-scope="scope">
                    <img style="width: 60px;height: 60px;border-radius: 50%" :src="imgUrl+scope.row.avatar" alt="">
                  </template>
                </el-table-column>
                <el-table-column label="简介" prop="description"></el-table-column>
                <el-table-column label="邮箱" prop="email"></el-table-column>
                <el-table-column label="手机" prop="tel"></el-table-column>
                <el-table-column label="粉丝量" prop="fanCount"></el-table-column>
                <el-table-column label="上一次登录时间" prop="lastLogin"></el-table-column>
                <el-table-column label="认证">
                  <template slot-scope="scope">
                    <span v-if="scope.row.isFamous=='1'" style='color: #fdc226'>大V</span>
                    <span v-if="scope.row.isFamous=='0'" style='color: deepskyblue'>普通</span>
                    <span v-if="scope.row.isFamous=='2'" style='color: deepskyblue'>待审核</span>
                  </template>
                </el-table-column>
              <el-table-column label="是否冻结">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status=='1'" style='color: red'>冻结中</span>
                    <span v-if="scope.row.status=='0'" style='color: greenyellow'>正常</span>
                  </template>
              </el-table-column>
                <el-table-column label="操作"
                                 min-width="160%">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
                        <el-button v-if="scope.row.status == 0" type="primary" size="mini" @click="changeFrozen(scope.row.id,1)">冻结</el-button>
                        <el-button v-if="scope.row.status == 1" type="success" size="mini" @click="changeFrozen(scope.row.id,0)">解冻</el-button>

                        <el-button type="danger" size="mini" @click="removeUserById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10,15]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
        <!--添加用戶-->
        <el-dialog title="添加用戶" :visible.sync="addDialogVisible" width="50%" @close="addUserFormClose">
            <el-form
                    :model="addUserForm"
                    :rules="addUserFormRules"
                    ref="addUserFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="用戶名" prop="username">
                    <el-input v-model="addUserForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addUserForm.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="tel">
                    <el-input v-model="addUserForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addUserForm.email"></el-input>
                </el-form-item>

              <el-form-item label="个人简介" prop="description">
                <el-input  type="textarea" v-model="addUserForm.description" ></el-input>
              </el-form-item>

                <el-form-item label="是否认证" prop="isFamous">
                    <el-select v-model="addUserForm.isFamous" placeholder="请选择是否认证">
                        <el-option label="否" value="0"></el-option>
                        <el-option label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否锁定" prop="locked">
                    <el-select v-model="addUserForm.status" placeholder="请选择是否锁定账户">
                        <el-option label="否" value="0"></el-option>
                        <el-option label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addUser">确 定</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
      </span>
        </el-dialog>
        <!--修改用戶-->
        <el-dialog
                title="修改用戶"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editUserFormClose"
        >
            <el-form
                    :model="editUserForm"
                    :rules="editUserForm"
                    ref="editUserFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
              <el-input type="hidden" v-model="editUserForm.id"></el-input>
                <el-form-item label="用戶名" prop="username">

                  <el-input v-model="editUserForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="editUserForm.password"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="tel">
                    <el-input v-model="editUserForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editUserForm.email"></el-input>
                </el-form-item>
              <el-form-item label="个人简介" prop="description">
                <el-input  type="textarea" v-model="editUserForm.description" ></el-input>
              </el-form-item>

              <el-form-item label="是否认证" prop="isFamous">
                <el-select v-model="editUserForm.isFamous" placeholder="请选择是否认证">
                  <el-option label="普通" value="0"></el-option>
                  <el-option label="大V" value="1"></el-option>
                  <el-option label="待审核" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否锁定" prop="locked">
                <el-select v-model="editUserForm.status" placeholder="请选择是否锁定账户">
                  <el-option label="否" value="0" ></el-option>
                  <el-option label="是" value="1" ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editUser">确 定</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                imgUrl:this.$Myurl.userImageUrl,
                editDialogVisible: false,
                swflag: false,
                pageNum: 1,
                pageSize: 5,
                userList: [],
                //roleList: [], //系统中所有的角色
                // userRoleList: [], //用户拥有的角色
                total: 0,
                username: "",
                addDialogVisible: false,
                addUserForm: {
                    username: "",
                    avatar: "",
                    description: "",
                    lastLogin: "",
                    status: "0",
                    fanCount: "",
                    isDelete: "0",
                    isFamous:"0",
                    email: "",
                    tel: ""
                },
                editUserForm: {

                  username: "",
                  password:"",
                  avatar: "",
                  description: "",
                  lastLogin: "",
                  status: "",
                  fanCount: "",
                  isDelete: "",
                  isFamous:"",
                  email: "",
                  tel: ""
                },
                editUserFormRules: {
                /*  username: [
                    { required: true, message: "请输入用戶名", trigger: "blur" },
                    { min: 3, max: 8, message: "用戶名在3-8个字符之間", trigger: "blur" }
                  ],
                  password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 3, max: 8, message: "密码在3-8个字符之间", trigger: "blur" }
                  ],
                  tel: [{ required: true, message: '请输入电话', trigger: 'blur' }],
                  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                  roleIds: [{type:'array', required: true, message: '请至少赋予一个角色', trigger: 'blur,change' }],
                  locked: [{ required: true, message: "请选择账号状态", trigger: "blur" }]*/
                },
                addUserFormRules: {
              /*    username: [
                    { required: true, message: "请输入用戶名", trigger: "blur" },
                    { min: 3, max: 12, message: "用戶名在3-12个字符之間", trigger: "blur" }
                  ],
                  password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 3, max: 8, message: "密码在3-8个字符之间", trigger: "blur" }
                  ],
                  tel: [{ required: true, message: '请输入电话', trigger: 'blur' }],
                  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                  roleIds: [{ type:'array',required: true, message: '请至少赋予一个角色', trigger: 'blur,change' }],
                  locked: [{ required: true, message: "请选择账号状态", trigger: "blur" }]*/
                }
            };
        },
        methods: {
          //生成表格
          htmlToExcel(dom,title) {
            this.ToExcel(dom,title)
          },
          editUser(){
            this.$refs.editUserFormRef.validate(valid=>{
              if(!valid){
                return;
              }else{
                let url = "user/modify";
                console.log(this.editUserForm)
                this.$axios.put(url,this.editUserForm)
                    .then(res=>{
                      if (res.data.code == 200){
                        this.$message({
                          type:'success',
                          message:res.data.msg,
                          duration:1000
                        });
                        this.initUser();
                        this.$refs.editUserFormRef.resetFields();
                        this.editDialogVisible = false;
                      }else {
                        this.$message({
                          message:res.data.msg,
                          type:"error",
                          duration:1000
                        })
                      }
                    })
              }
            })

          },
          editUserFormClose(){
            this.$refs.editUserFormRef.resetFields();
          },
          addUser(){
            this.$refs.addUserFormRef.validate(valid => {
              if (!valid){
                return;
              } else {
                let url = "user/register";
                console.log(this.addUserForm)
                this.$axios.post(url,this.addUserForm)
                    .then(res=>{
                      if (res.data.code == 200){
                        this.$message({
                          type:'success',
                          message:res.data.msg,
                          duration:1000
                        });
                        this.initUser();
                        this.$refs.addUserFormRef.resetFields();
                        this.addDialogVisible = false;
                      }else {
                        this.$message({
                          message:res.data.msg,
                          type:"error",
                          duration:1000
                        })
                      }
                    })
              }
            })
          },
          resetFields() {
            if (!this.model) {
              console.warn('[Element Warn][Form]model is required for resetFields to work.');
              return;
            }
            this.fields.forEach(field => {
              field.resetField();
            });
          },
          addUserFormClose(){
            this.$refs.addUserFormRef.resetFields();
          },
          showEditDialog(row){
            this.editDialogVisible = true;
            this.editUserForm = JSON.parse(JSON.stringify(row));
          },
          changeFrozen(id,status){
            let url = "user/changeLocked";
            this.$axios.get(url,{
              params:{
                id:id,
                status:status
              }
            }).then(res=>{
              if (res.data.code == 200){
                this.$message({
                  type:'success',
                  message:res.data.msg,
                  duration:1000
                });
                this.initUser();
              }else {
                this.$message({
                  message:res.data.msg,
                  type:"error",
                  duration:1000
                })
              }
            })
          },
          removeUserById(id){
            let url = "user/del/"+id;
            this.$axios.delete(url)
                .then(res=>{
                  if (res.data.code == 200){
                    this.$message({
                      type:'success',
                      message:res.data.msg,
                      duration:1000
                    });
                    this.initUser();
                  }else {
                    this.$message({
                      message:res.data.msg,
                      type:"error",
                      duration:1000
                    })
                  }
                })
          },
          handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.initUser();
          },
          handleCurrentChange(newPage) {
            this.pageNum = newPage;
            this.initUser();
          },
          searchUser(){
            this.pageNum =1;
            this.initUser();
          },
          initUser(){
            let url = "user/uList";
            this.$axios.get(url,{
              params:{
                username:this.username,
                now:this.pageNum,
                size:this.pageSize
              }
            }).then(res=>{
              if(res.data.code==200){
                console.log(res.data.data.list)
                this.userList = res.data.data.list;
                this.pageNum = res.data.data.pageNum;
                this.pageSize = res.data.data.pageSize;
                this.total = res.data.data.total;
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            })
          }

        },
        created() {
            this.initUser();
        }
    };
</script>
<style lang="less" scoped>
</style>